<template>
  <el-form-item :prop="prop" :label="label">
    <el-select v-bind="$attrs" :disabled="!isEdit" clearable :placeholder="placeholder" :style="inputStyle">
      <el-option v-for="item in basEnumList" :key="item.code" :value="item.code" :label="item.code"
        :disabled="!item.isEnabled" />
    </el-select>
  </el-form-item>
</template>

<script lang="ts" setup>
// 枚举下拉选择框
import { getEnumItemsByType } from '/@/stores/baseInfo/'
import { getInputWidth } from './shared';

defineOptions({
  name: 'MkSelectEnum'
})

const props = defineProps({
  prop: {
    type: String,
    require: true
  },
  label: {
    type: String,
  },
  isEdit: {
    type: Boolean,
    default: true
  },
  // 占位符用props传入，默认空字符串，不显示“请选择”
  placeholder: {
    type: String,
    default: ''
  },
  enumType: {
    type: String, //有值时，优先使用，没有值时，使用config.prop
    default: '',
    require: true
  },
  col: { // 控制宽度, 最多设置为3, 特殊情况可以设置为4
    type: Number,
    default: 1
  },
})

const { inputStyle } = getInputWidth(props.col);

const basEnumList = getEnumItemsByType(props.enumType);
</script>
